<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>vue.draggable例子</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="http://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="http://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
</head>
<body style="padding:10px;">
<div id="app">
    <div>拖拽可以修改站点顺序</div>
    <div>{{drag ? '拖拽中' : '拖拽停止'}}</div>
    <draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000"
               @start="onStart" @end="onEnd">
        <transition-group>
            <span class="item" v-for="(element,i) in myArray" :key="element.id">
                <span style="border: 1px solid">{{element.name}}</span>
                <span v-if="i!==myArray.length-1"><====></span>
            </span>
        </transition-group>
    </draggable>
</div>
<script>
    // 全局注册组件
    Vue.component('vuedraggable', window.vuedraggable)
    var app = new Vue({
        el: '#app',
        components: {
            vuedraggable: window.vuedraggable,//当前页面注册组件
        },
        data() {
            return {
                drag: false,
                myArray: [
                    {people: 'cn', id: 2, name: '站点2'},
                    {people: 'cn', id: 3, name: '站点3'},
                    {people: 'cn', id: 1, name: '站点1'},
                    {people: 'us', id: 4, name: '站点4'}
                ]
            };
        },
        methods: {
            onStart() {
                this.drag = true;
            },
            onEnd() {
                this.drag = false;
                console.log(this.myArray)
            }
        }
    });
</script>
</body>
</html>